<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .datepicker{
            display: inline-block;
            position: relative;
            width: 280px;
            height: 30px;
        }
        .datepicker-box{
            width: 280px;
            height:320px;
            position: absolute;
            left: 0;
            top: 30px;
            display: none;
        }
        .datepicker-box .datepicker-header{
            width: 280px;
            height: 40px;
            display: flex;
        }
        .datepicker-header .header-prev{
            flex: 1;
        }
        .datepicker-header .header-next{
            flex: 1;
        }
        .datepicker-header .header-content{
            flex: 3;
        }
        .datepicker-header div{
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: black;
            color: burlywood;
        }
        .datepicker-title{
            width: 280px;
            height: 40px;
        }
        .datepicker-title .item,.datepicke-content .item{
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }
    </style>
</head>

<body>

    开始时间
    <div class="datepicker">
        <input id="start" />
        <div class="datepicker-box">
            <div class="datepicker-header">
                <div class="header-prev">上</div>
                <div class="header-content">2021-10</div>
                <div class="header-next">下</div>
            </div>
            <div class="datepicker-title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>
            
            <div class="datepicke-content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>

        </div>
    </div>
</body>
<script>
    let startInput =document.getElementById("start");
    let box = document.querySelector(".datepicker-box");

    startInput.onclick = function(){
        box.style.display="block";
    }


</script>

</html>